<template>
  <div class="yisheng">
    <div class="top" >
      <p>查询条件</p>
      <div class="topbox">
        <div class="name">
          医生姓名：
          <input type="text" />
        </div>
        <div class="name">
          医院名称：
          <input type="text" />
        </div>

        <form>
          一级科室：
          <select>
            <option>全部</option>
            <option>三级甲</option>
            <option>三级乙</option>
            <option>二级甲</option>
            <option>二级乙</option>
          </select>
        </form>

        <div class="button">
          <button>重置</button>
          <button>查询</button>
        </div>
      </div>
    </div>

    <div class="bottom">
      <p>医生列表</p>
      <div class="buttonlist">
        <span @click="router.push('/maxindex/zengjia')">+添加</span>
        <span>删除</span>
        <span>上架</span>
        <span>下架</span>
      </div>
      <div class="index_box">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="医生姓名" width="150">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column property="img" label="医生头像" width="160">
            <img
              src="https://img0.baidu.com/it/u=1224977975,1987311585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
              alt=""
              style="widht: 40px; height: 40px; border-radius: 50%"
            />
          </el-table-column>
          <el-table-column property="site" label="医生职称" width="150">
            <template #default="scope">{{ scope.row.zhicheng }}</template>
          </el-table-column>
          <el-table-column property="type" label="所属医院" width="150">
            <template #default="scope">{{ scope.row.yiyuan }}</template>
          </el-table-column>
          <el-table-column property="class" label="所属科室" width="150">
            <template #default="scope">{{ scope.row.keshi }}</template>
          </el-table-column>
          <el-table-column property="shangjia" label="是否上架" width="150">
            <el-switch v-model="value1" />
          </el-table-column>
          <el-table-column property="caozuo" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="goxiangqing(scope.row)"
                >查看详情</el-button
              >
              <el-button link type="primary" size="small" @click="fun"
                >设置挂号预约</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column
            property="address"
            label="Address"
            show-overflow-tooltip
          /> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

import { useRouter } from "vue-router";

import { onMounted } from "@vue/runtime-core";


import {useyisheng} from '../../stores/counter'

const router = useRouter();

var tableData = ref([

])


var store = useyisheng()

onMounted(() => {
  tableData.value =store.yisheng;
})





// var value1 = ref("true")



//去详情页
var goxiangqing = (row) => {
  router.push({
    path: "/maxindex/YiShengxiangqing/",
    query: { id:JSON.stringify(row)},
  });
  console.log(row);
};

</script>

<style lang="scss" scoped>
.yisheng {
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.23);
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  .top {
    width: 100%;
    height: 100px;
    background-color: white;
    margin: 20px 0;
    padding-left: 20px;
    box-sizing: border-box;
    border-radius: 5px;

    h3 {
      height: 40px;
      font-size: 16px;
      // background-color: blue;
      line-height: 40px;
    }
    .topbox {
      width: 100%;
      height: 60px;
      // background-color: orange;
      line-height: 60px;
      display: flex;
      font-size: 12px;
      .name {
        margin-right: 20px;
        input {
          width: 110px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid rgba(128, 128, 128, 0.605);
          outline-color: rgba(0, 0, 255, 0.478);
        }
      }
      form {
        margin: 0 20px;
        select {
          width: 130px;
          height: 30px;
          text-align: center;
          border: 1px solid rgba(128, 128, 128, 0.542);
          border-radius: 5px;
        }
      }

      .button {
        button {
          width: 60px;
          height: 30px;
          margin: 0 5px;
          border-radius: 5px;
          border: none;

          &:hover {
            color: white;
            background-color: blue;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 470px;
    background-color: white;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: auto;
    p {
      width: 100%;
      height: 50px;
      // background-color: red;
      line-height: 50px;
      font-weight: 700;
    }
    .buttonlist {
      width: 100%;
      height: 50px;
      background-color: white;
      display: flex;
      align-items: center;
      position: sticky;
      top: -1px;
      z-index: 999;
      span {
        display: inline-block;
        padding: 5px 15px;
        border: 1px solid rgba(0, 0, 255, 0.314);
        margin-right: 20px;
        color: rgba(0, 0, 255, 0.433);
        border-radius: 5px;
        &:nth-child(1) {
          background-color: rgba(0, 0, 255, 0.808);
          color: white;
        }
        &:nth-child(2) {
          background-color: rgba(255, 0, 0, 0.64);
          color: white;
        }
      }
    }
  }
}
</style>